<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
</head>
<body>
<div id="app">
    {{ message }}{{ message + message }}
    <div v-bind:id="message"></div>
    <!--<ul>
        todo-item v-for="item in list" :title="item.title" :del="item.del"></todo-item>
    </ul>-->
    <todo-list>
        <todo-item @delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del">
            <template v-slot:pre-icon="{value}">
                <span>前置图表 {{ value }}</span>
            </template>
            <template v-slot:suf-icon>
            </template>
        </todo-item>
    </todo-list>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('todo-item', {
        props: {
            title: String,
            del: {
                type: Boolean,
                default: false
            },
        },
        template: `
        <li>
            <slot name="pre-icon" :value="value"></slot>
            <span v-if="!del">{{ title }}</span>
            <span v-else style="text-decoration: line-through">{{ title }}</span>
            <slot name="suf-icon">/haha</slot>
            <button v-show="!del" @click="handleClick">移除</button>
        </li>
        `,
        data: function () {
            return {
                value: Math.random()
            }
        },
        methods: {
            handleClick() {
                console.log('点击删除按钮')
                this.$emit('delete', this.title)
            }
        }
    })
    Vue.component('todo-list', {
        template: `
        <ul>
            <slot></slot>
        </ul>
        `,
        data: function () {
            return {

            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world',
            list: [{
                title: '课程1',
                del: false
            }, {
                title: '课程2',
                del: true
            }]
        },
        methods: {
            handleDelete(val) {
                console.log('handleDelete', val)
            }
        }
    })
</script>
</body>
</html>
